<template>
  <div class="video-config">
    <a-form :model="formState" layout="vertical">
      <a-form-item label="视频编码" name="codec">
        <a-select v-model:value="formState.codec">
          <a-select-option value="h264">H.264</a-select-option>
          <a-select-option value="h265">H.265</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="分辨率" name="resolution">
        <a-select v-model:value="formState.resolution">
          <a-select-option value="1080p">1920x1080</a-select-option>
          <a-select-option value="720p">1280x720</a-select-option>
          <a-select-option value="480p">640x480</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="帧率" name="fps">
        <a-input-number v-model:value="formState.fps" :min="1" :max="60" />
      </a-form-item>

      <a-form-item label="码率" name="bitrate">
        <a-input-number v-model:value="formState.bitrate" :min="100" :max="8000" :step="100" addon-after="Kbps" />
      </a-form-item>

      <a-form-item label="编码质量" name="quality">
        <a-slider v-model:value="formState.quality" :marks="{
          0: '最低',
          25: '低',
          50: '中',
          75: '高',
          100: '最高'
        }" :step="25" />
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSubmit">保存设置</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'VideoConfig',
  setup() {
    const formState = reactive({
      codec: 'h264',
      resolution: '1080p',
      fps: 30,
      bitrate: 2000,
      quality: 75
    });

    const handleSubmit = async () => {
      try {
        // 这里添加实际的API调用
        message.success('设置已保存');
      } catch (error) {
        message.error('保存失败，请重试');
      }
    };

    const handleReset = () => {
      formState.codec = 'h264';
      formState.resolution = '1080p';
      formState.fps = 30;
      formState.bitrate = 2000;
      formState.quality = 75;
      message.info('已重置为默认设置');
    };

    return {
      formState,
      handleSubmit,
      handleReset
    };
  }
});
</script>

<style scoped>
.video-config {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
</style>
